<!-- 
<template>
  <div class="pdf-container">
    <div class="thumbnail-container">
      <div
        v-for="page in numPages"
        :key="page"
        class="thumbnail-item"
        @click="jumpToPage(page)"
      >
        <pdf :src="fileSrc" :page="page" :scale="0.2"></pdf>
      </div>
    </div>
    <div class="main-view" ref="mainView">
      <pdf
        :src="fileSrc"
        :page="currentPage"
        @num-pages="numPages = $event"
        @page-loaded="currentPage = $event"
      ></pdf>
    </div>
  </div>
</template> -->
  
  <!-- <script>
import pdf from "vue-pdf";
import * as pdfjsLib from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

// 设置 Worker 源路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export default {
  components: { pdf },
  name: "Preview",
  props: {
    fileSrc: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // pdfSrc: '',       // PDF文件路径
      currentPage: 1,
      numPages: 0,
    };
  },
  methods: {
    jumpToPage(page) {
      this.currentPage = page;
      this.$refs.mainView.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标页‌:ml-citation{ref="4" data="citationList"}
    },
  },
};
</script>
   -->
  <!-- <style scoped>
.pdf-container {
  display: flex;
  gap: 20px;
}

.thumbnail-container {
  width: 200px;
  overflow-y: auto;
}

.thumbnail-item {
  cursor: pointer;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  transition: transform 0.3s;
}

.thumbnail-item:hover {
  transform: scale(
    1.05
  ); /* 悬停放大效果‌:ml-citation{ref="4" data="citationList"} */
}

.main-view {
  flex: 1;
  max-height: 90vh;
  overflow: auto;
}
</style>
   -->